<template>
   <uni-list :border="false" class="album-list">
     <uni-list-item v-for="item,index in list" :key="index">
       <template v-slot:body>
         <view  class="album-item">
           <image @load="loadHandler" class="img" :src="item.blurPicUrl+'?param=70y70'" mode="aspectFill"></image>
           <view v-if="isImageLoad" class="bg">
           </view>
           <view class="info">
             <view class="title">
               {{item.name}}
             </view>
             <view class="aritist">
               {{item.artist.name}} {{timeFormat(item.publishTime)}}
             </view>
           </view>
         </view>
       </template>
       <template v-slot:footer>

       </template>
     </uni-list-item>
   </uni-list>
   <uni-load-more v-if="list.length" :status="status"></uni-load-more>

 </template>

 <script setup>
   import {
     timeFormat
   } from '@/utils/index.js'
   import {
     ref
   } from "vue";
   const props = defineProps({
     list: {
       type: Array,
       default: () => []
     },
     status: {
       type: String,
       default: 'more'
     }
   })
   const isImageLoad = ref(false)
   const loadHandler = ()=>{
     if(isImageLoad.value){
       return
     }
     isImageLoad.value = true
   }
 </script>
 <style lang="less">
   .album-list {
     .album-item {
       display: flex;
       align-items: center;
       padding: 10rpx 0; 
       .img {
         width: 140rpx;
         height: 140rpx;
         border-radius: 10rpx;
         z-index: 999;
         margin-right: 30rpx;
         background-color: #828282;
       }
       .bg{
         position: absolute;
         bottom: 50rpx;
         width: 140rpx;
         height: 140rpx;
         border-radius: 50%;
         background-color: #000;
       }

       .info {
         .title {
           font-size: 32rpx;
           margin-bottom: 20rpx;
         }
         .aritist {
           font-size: 24rpx;
           color: #828282;
           
         }
       }
     }
   }
 </style>
